1 files changed, 30 insertions, 14 deletions

diff --git a/pages/search/[param].js b/pages/search/[param].js
index 9fc2b17..96d6671 100644
--- a/pages/search/[param].js
+++ b/pages/search/[param].js
@@ -56,8 +56,11 @@ export default function Card() {
   let tipe = "ANIME";
   let s = undefined;
   let y = NaN;
+  let gr = undefined;
 
   const query = router.query;
+  gr = query.genres;
+
   if (query.param !== "anime" && query.param !== "manga") {
     hasil = query.param;
   } else if (query.param === "anime") {
@@ -96,9 +99,8 @@ export default function Card() {
 
   const [search, setQuery] = useState(hasil);
   const [type, setSelectedType] = useState(tipe);
-  const [genres, setSelectedGenre] = useState();
+  // const [genres, setSelectedGenre] = useState();
   const [sort, setSelectedSort] = useState();
-  // console.log(data);
 
   const [isVisible, setIsVisible] = useState(false);
 
@@ -112,7 +114,7 @@ export default function Card() {
     const data = await aniAdvanceSearch({
       search: search,
       type: type,
-      genres: genres,
+      genres: gr,
       page: page,
       sort: sort,
       season: s,
@@ -137,7 +139,7 @@ export default function Card() {
     setPage(1);
     setNextPage(true);
     advance();
-  }, [search, type, genres, sort, s, y]);
+  }, [search, type, sort, s, y, gr]);
 
   useEffect(() => {
     advance();
@@ -178,8 +180,9 @@ export default function Card() {
   function trash() {
     setQuery(null);
     inputRef.current.value = "";
-    setSelectedGenre(null);
+    // setSelectedGenre(null);
     setSelectedSort(["POPULARITY_DESC"]);
+    router.push(`/search/${tipe.toLocaleLowerCase()}`);
   }
 
   function handleVisible() {
@@ -202,7 +205,7 @@ export default function Card() {
       <div className="bg-primary">
         <Navbar />
         <div className="min-h-screen mt-10 mb-14 text-white items-center gap-5 xl:gap-0 flex flex-col">
-          <div className="w-screen px-10 xl:w-[80%] xl:h-[10rem] flex text-center xl:items-end xl:pb-16 justify-center lg:gap-7 xl:gap-10 gap-3 font-karla font-light">
+          <div className="w-screen px-10 xl:w-[80%] xl:h-[10rem] flex text-center xl:items-end xl:pb-10 justify-center lg:gap-7 xl:gap-10 gap-3 font-karla font-light">
             <div className="text-start">
               <h1 className="font-bold xl:pb-5 pb-3 hidden lg:block text-md pl-1 font-outfit">
                 TITLE
@@ -299,6 +302,7 @@ export default function Card() {
               </div>
             </div>
           </div>
+
           <div className="w-screen xl:w-[64%] flex xl:justify-end xl:pl-0">
             <AnimatePresence>
               {isVisible && (
@@ -309,19 +313,24 @@ export default function Card() {
                   exit={{ opacity: 0, y: -10 }}
                   className="xl:pb-16"
                 >
-                  <div className="text-start items-center xl:items-start flex w-screen xl:w-auto px-8 xl:px-0 flex-row justify-between xl:flex-col pb-5 ">
+                  <div className="text-start items-center xl:items-start flex w-screen xl:w-auto px-8 xl:px-0 flex-row justify-between xl:flex-col pb-5 lg:pb-0 ">
                     <h1 className="font-bold xl:pb-5 text-md pl-1 font-outfit">
                       GENRE
                     </h1>
                     <select
                       className="w-[195px] xl:w-[297px] xl:h-[46px] h-[35px] bg-secondary rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
-                      onChange={(e) =>
-                        setSelectedGenre(
-                          e.target.value === "undefined"
-                            ? undefined
-                            : e.target.value
-                        )
-                      }
+                      onChange={(e) => {
+                        // setSelectedGenre(
+                        //   e.target.value === "undefined"
+                        //     ? undefined
+                        //     : e.target.value
+                        // );
+                        router.push(
+                          `/search/${tipe.toLocaleLowerCase()}/?genres=${
+                            e.target.value
+                          }`
+                        );
+                      }}
                     >
                       <option value="undefined">Select a Genre</option>
                       {genre.map((option) => {
@@ -372,6 +381,13 @@ export default function Card() {
               )}
             </AnimatePresence>
           </div>
+          {gr && (
+            <div className="lg:w-[70%] px-5 lg:px-4 w-screen lg:mb-6">
+              <h1 className="font-bold text-[25px] font-karla">
+                Looking for : {gr}
+              </h1>
+            </div>
+          )}
           <div className="flex flex-col gap-14 items-center">
             <AnimatePresence>
               <div